<template>
    <div id="body-padding">
        <div id="title">
            <img :src="'http://localhost:3000'+(data.userID.avatar?data.userID.avatar:'/img/avatar/mr.jpg')" alt="">
            <div>
                <p>{{data.userID.name}}</p>
                <p>{{time}} 加入</p>
            </div>
        </div> 
        <div id="geshi" v-if="(!show.isMe)&&show.isLogin">
            <p>
                <button v-show="!show.info" @click="guClick(data.userID._id)">关注</button>
                <button v-show="show.info" @click="quClick(data.userID._id)">已关注</button>
                <span class="fa fa-spin fa-spinner" v-show="spin"></span>
            </p>
            <p>
                <router-link to="#">屏蔽</router-link>
                <router-link to="#">举报</router-link>
            </p>
        </div>
        <div class="day">
            《{{data.diaryID.name}}》<br>
            <span class="sj"> {{data.sj}}</span>
            <!--<pre>{{data.content}}</pre>-->
            <div v-html="data.content" id="content">
            </div>
            <img :src="'http://localhost:3000'+data.img" v-if="data.img">
            <div class="daya" v-if="show.isMe">
                <span></span>
                <div>
                    <router-link :to="'/update/'+data._id">编辑</router-link>
                    <a @click="delClick(data._id)">删除</a>
                </div>
            </div>
            <p id="p">回复....</p>
            <div v-show="!show.isLogin" id="login">
                <p>
                    <router-link to="/login">登录</router-link>
                    才能回复
                </p>
            </div>
            <div v-show="show.isLogin">
                <textarea v-model="txt" cols="30" rows="8"></textarea>
                <button id="btn" @click="btnClick">回复</button>
            </div>
            <div class="reply" id="title" v-for="d in data2">
                <img :src="'http://localhost:3000'+(d.userID.avatar?d.userID.avatar:'/img/avatar/mr.jpg')" alt="">
            <div class="replys">
                <router-link :to="'/new/day/'+d.userID._id">{{d.userID.name}}</router-link>
                
                <span>{{d.time.split(' ')[1]}}</span><br>
                <router-link :to="'/new/day/'+d.replyID" v-if="d.replyName" class="aite">@{{d.replyName}}</router-link>
                <!--<pre>{{d.content}}</pre>-->
                <div v-html="d.content" id="content"></div>
                <a 
                    @click="replyClick(d.userID._id)"
                    class="replys-a" 
                    v-if="show.isLogin"
                >回复</a>
            </div>
            
            </div>
        </div>
    </div>
</template>
 
<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            txt:"",
            data:{userID:{avatar:"",time:""},diaryID:{name:''}},
            show:{},
            data2:[],
            spin:false,
        }
    },
    computed:{
        time(){
            return this.data.userID.time.split(' ')[0]
        },
        ...mapState([
            ""
        ])
    },
    methods:{
        replyClick(e){
            var data = {
                repID:e,
                logID:this.$route.params.id
            };
            this.$store.dispatch("replyID",data);
        },
        guClick(e){

            this.spin=true,
            setTimeout(()=> {
                this.http.get("/users/info",{params:{info:e}})
                .then(res=>{
                    this.spin=false;
                    this.reply();
                    this.layer.msg(res.data.msg)
                })
            }, 1000);
            
        },
        quClick(e){
            this.spin=true,
            setTimeout(()=> {
               this.http.post("/users/info",{info:e})
                .then(res=>{
                    this.spin=false;
                    this.reply();
                    this.layer.msg(res.data.msg)
                })
            }, 1000);
        },
        // 删除
        delClick(e){
            this.layer.confirm('确定删除吗？', {},()=>{
                this.layer.closeAll();
                this.$store.dispatch("delLog",e);
            },function(){
                this.layer.closeAll();
            });
        },
        reply(){
            this.http.get("/diary/reply",{params:{id:this.$route.params.id}})
            .then(res=>{
                console.log(res.data);
                if(res.data.err==3){
                    this.layer.msg("页面丢失")
                    return;
                }
                this.data = res.data.data.data;
                this.data.content = this.data.content.replace(/\n/g,'<br>')
                this.data2 = res.data.data.data.reply;
                for(var i=0;i<this.data2.length; i++){
                    this.data2[i].content =  this.data2[i].content.replace(/\n/g,'<br>')
                }
                this.show = res.data.data.data1;
            })
        },
        btnClick(){
            if(this.show.isLogin){
                var params = {
                    content:this.txt,
                    logID:this.$route.params.id,
                }
                this.http.get("/reply/add",{params})
                .then(res=>{
                    if(res.data.err==5){
                        window.location.href = "#/login";
                        return;
                    }
                    this.layer.msg(res.data.msg);
                    
                    if(res.data.err==0){
                        this.reply();
                        this.txt="";
                    }
                })
            }else{
                this.layer.msg("请先登录");
            }
        }
    },
    activated(){
        this.reply();
        this.$store.dispatch("word");
    }
}
</script>

<style scoped>
#title img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
#title{
    display: flex;
    margin: 20px 0;
}
#title p{
    margin: 0;
    font-size: 14px;
    padding-left: 10px;
    line-height: 25px;
}
.replys{
    padding-left: 10px;
    position: relative;
    width: 100%;
}
.replys a{
    color: #2319DC;
}
.replys .replys-a{
    font-size: 10px;
    position: absolute;
    right: 50px;
    bottom: 5px;
    color: #999;
    /*border: solid 1px #ccc;*/
}
#geshi{
    display: flex;
    justify-content: space-between;
    height: 50px;
}
#geshi button{
    height: 30px;
    border-radius: 4px;
    border: solid 1px #ccc;
}
#geshi button:nth-of-type(1){
    background-color: #009AFF;
    border: solid 1px #009AFF;
    color: white;
}
#geshi p{
    margin: 0;
}
.day{
    /*border-bottom: solid 1px #ccc;*/
    padding: 8px 2px;
}
.day img{
    max-width: 100%;
}
.daya{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px 0;
}
.daya a{
    margin: 0 5px;
}
.sj{
    font-size: 10px;
    color: #999;
    padding-left: 7px;
}
textarea{
    border-radius: 4px;
}
textarea:hover{
    border: solid 1px #009AFF;
}
#login{
    text-align: center;
    background-color: yellow;
    padding: 8px;
    border-radius: 8px;
}
#login a{
    color: #009AFF;
}
.aite{
    font-size: 14px;
}
#content{
    width: 100%;
}
</style>